<form class="col-sm-6 offset-sm-3">
  <div class="form-group">
    <label>用户名：</label>
    <input #username
           type="text"
           class="form-control"
           placeholder="请输入用户名"
           (keyup.enter)="checkUsername(username.value)"
           (blur)="checkUsername(username.value)">
  </div>
  <div *ngIf="!isUsernameRight" class="alert alert-danger">
    <strong>错误!</strong> 用户名应大于四个字符
  </div>
  <div class="form-group">
    <label>密码：</label>
    <input #password
           type="password"
           class="form-control"
           placeholder="请输入密码"
           (keyup.enter)="checkPassword(password.value)"
           (blur)="checkPassword(password.value)">
  </div>
  <div *ngIf="!isPasswordRight" class="alert alert-danger">
    <strong>错误!</strong> 密码应大于六个字符
  </div>
  <div class="form-group">
    <label>再次输入密码：</label>
    <input #passwordAgain
           type="password"
           class="form-control"
           placeholder="请再次输入密码"
           (keyup.enter)="checkPasswordEqually(password.value, passwordAgain.value)"
           (blur)="checkPasswordEqually(password.value, passwordAgain.value)">
  </div>
  <div *ngIf="!isPasswordEqually" class="alert alert-danger">
    <strong>错误!</strong> 两次输入的密码应该一致
  </div>
  <div class="form-group">
    <label>请输入验证码：</label>
    <input #verification
           type="text"
           class="form-control col-sm-6"
           placeholder="请输入下方验证码"
           (keyup.enter)="checkVerification(verification.value)"
           (blur)="checkVerification(verification.value)">
    <app-verification #verificationComponent
                      class="col-sm-6"
                      (notify)="onVerificationNotify($event)"></app-verification>
  </div>
  <div *ngIf="!isVerificationRight" class="alert alert-danger">
    <strong>错误!</strong> 验证码应该为四位
  </div>
  <div class="form-check">
    <label class="form-check-label">
      <input #agree
             class="form-check-input"
             type="checkbox">
      我已仔细阅读并接受<a href="/agreement">zzblog用户服务协议</a>
    </label>
  </div>
  <button type="button"
          class="btn btn-primary"
          (click)="registerUser(username.value, password.value, passwordAgain.value, verification.value, agree.checked, verificationComponent)">注册</button>
  <a class="float-right login">已有账号？<a href="/login">去登录</a></a>
</form>
